<html>
<body>
<h1>Simple Echo & Chat Server</h1>
<form id="form">
  <input type="text" id="input" value="send a message"></input>
</form>
<div id="msgs"></div>
</body>

<script type="text/javascript">
    window.onload = function(){
        (function(){
            var show = function(el){
                return function(msg){ el.innerHTML = msg + '<br />' + el.innerHTML; }
            }(document.getElementById('msgs'));

            var url = 'ws://' + window.location.host + '/socket';
            alert('opening connection to: ' + url)
            var ws       = new WebSocket(url);
            ws.onopen    = function()  { show('websocket opened'); };
            ws.onclose   = function()  { show('websocket closed'); }
            ws.onmessage = function(m) { show('websocket message: ' +  m.data); };

            var sender = function(f){
                var input     = document.getElementById('input');
                input.onclick = function(){ input.value = "" };
                f.onsubmit    = function(){
                    ws.send(input.value);
                    input.value = "send a message";
                    return false;
                }
            }(document.getElementById('form'));
        })();
    }
</script>
</html>